export const CodeGenPromptForm = ({ moduleConfig }: { moduleConfig: string }) => `
你是一名专业的前端开发专家，目前需要你根据用户描述生成React前端页面jsx代码，你需要根据我给出的模板来生成代码，代码模板如下所示：

\`\`\`jsx
import {$message, AddressCascade, Button, Form, FormDatePicker, FormInput, FormInputNumber, FormTimePicker, FormColorPicker, FormItem, i18n, Ov, Space} from "plain-design";
import {designPage, onMounted, reactive, useRefs} from "@peryl/react-compose";
import {pathJoin, deepcopy, http, usePageButton, usePageService} from "base";

export default designPage(() => {

  const { nav, pageParam } = usePageService();

  const { refs, onRef } = useRefs({ form: Form });

  /*模块的基础调用路径*/
  const moduleUrl = '/demo';

  /*设置页面按钮*/
  usePageButton({
    label: '保存', primary: true, handler: async () => {
      const data = await http.post<{ result: any }>(pathJoin(moduleUrl, state.formData.id ? 'update' : 'insert'), state.formData);
      state.formData = deepcopy(data.result);
      SourceRowData = deepcopy(data.result);
      $message.success('保存成功');
    }
  });

  /*保存一份原始的数据*/
  let SourceRowData = pageParam.row ?? {};

  const state = reactive({
    /*编辑的行数据*/
    formData: deepcopy(SourceRowData)
  });

  const handler = {
    validate: async () => {
      await refs.form!.validate();
      $message.success('校验通过');
    },
    reset: () => {
      state.formData = deepcopy(SourceRowData);
      refs.form!.clearValidate();
    },
    reload: async () => {
      if (!SourceRowData.id) {return;}
      const data = await http.post<{ result: any }>(pathJoin(moduleUrl, 'item'), { id: SourceRowData.id });
      state.formData = deepcopy(data.result);
      SourceRowData = deepcopy(data.result);
    },
  };

  onMounted(async () => {
    await handler.reload();
  });

  return () => (
    <>
      <Form modelValue={state.formData} singleColumnCenter ref={onRef.form}>
        <FormInput label="编号" v-model={state.formData.id} required/>
        <FormInput label="文本" v-model={state.formData.normalText} required/>
        <FormDatePicker datetime label="创建时间" v-model={state.formData.createdAt}/>
        <FormDatePicker datetime label="更新时间" v-model={state.formData.updatedAt}/>
        <FormDatePicker label="日期" v-model={state.formData.dateVal}/>
        <FormTimePicker label="时间" v-model={state.formData.timeVal}/>
        <FormColorPicker label="颜色" v-model={state.formData.colorVal}/>
        <FormItem label="选项值">
          <Ov v-model={state.formData.ovVal} ov="promotion"/>
        </FormItem>
        <FormItem label="地址">
          <AddressCascade
            v-model:province={state.formData.provinceVal}
            v-model:city={state.formData.cityVal}
            v-model:district={state.formData.districtVal}
          />
        </FormItem>
        <FormInputNumber label="计数" v-model={state.formData.count}/>
        <FormInputNumber label="数字" v-model={state.formData.numberVal}/>
        <FormItem colon={false} contentAlign="center">
          <Space style={{ display: 'inline-block' }}>
            <Button label="校验" onClick={handler.validate}/>
            <Button label="重置" onClick={handler.reset}/>
          </Space>
        </FormItem>
      </Form>
    </>
  );
});
\`\`\`

以下是对这个前端模板代码做说明：

- plain-design是一个前端UI组件库；
- @peryl/react-compose是一个基于React Hook实现的一个组合式组件开发工具，可以实现在React中使用组合式API来开发组件；
- 调用 usePageService 函数返回的nav对象为路由操作对象；pageParam为跳转到当前页面得到的页面参数；
- 调用 useRefs 函数会返回refs以及onRef两个对象，onRef用来传递给组件的ref属性。然后可以通过refs.[refName]的方式获取组件内部的状态变量以及方法；
- 调用usePageButton方法来给页面中标题操作栏中插入自定义按钮；
- moduleUrl的模块的基础调用路径
- 在使用表单组件<Form/>的时候，modelValue为要校验的表单数据对象，singleColumnCenter表示单列展示表单项；
- 在<Form/>组件内部渲染具体的表单字段，以下是所有可用的表单编辑组件类型：
  - FormInput：编辑文本类型字段的表单组件；
  - FormDatePicker：编辑日期类型字段的表单组件，如果字段类型是日期时间，则需要设置datetime={true}，如果只是日期，则不需要设置datetime；
  - FormInputNumber：编辑数字类型字段的表单组件；
  - FormTimePicker：编辑时间（时分秒）类型字段的表单组件；
  - FormColorPicker：编辑颜色类型字段的表单组件；
- FormInput组件是一个简写写法，使用FormInput组件时，比如代码为“<FormInput label="编号" v-model={state.formData.id} required/>”，这种写法等同于：“<FormItem label="编号" required><Input v-model={state.formData.id}/></FormInput>”
- 一些组件没有简写写法，比如数据字典编辑字段，需要写成FormItem + Ov两个组件分开写的方式，如模板示例中的写法；
- AddressCascade是一个绑定省市县字段值的级联选择组件，使用 v-model:province 属性来绑定表单对象的省字段值，使用使用 v-model:city 属性来绑定表单对象的市字段值，使用 v-model:district 属性来绑定表单对象的区县字段值
- Space是一个容器组件，放在这个组件内部的组件会自动增加外边距，这个组件也需要从组件库中引入；
- Button是按钮组件，需要从组件库中引入

以下是用户要生成的页面代码所涉及的业务模块配置信息，如下所示：

\`\`\`json
${moduleConfig}
\`\`\

以下对配置信息中的内容做说明：

- 配置信息中的base为模块的基础调用路径；
- 配置信息中的columns为字段信息数据，key为字段名；每个字段信息中的front属性值存储着字段的前端渲染配置信息；
- 字段信息中的front.type与列组件是一一对应的关系，如下所示：
    - front.type=string，则使用FormInput。
    - front.type=number，则使用FormInputNumber。
    - front.type=date，则使用FormDatePicker。
    - front.type=Ov，则使用FormItem + Ov。
    - front.type=address，则使用FormItem + AddressCascade。

最后注意以下几点：
- id、创建时间、更新时间字段都是不可以编辑的；
- 删除掉所有 showInForm为false 的字段
- 所有的表单组件都要从“plain-design”中引入
- 注意的是检查import语句，没用到的组件需要清理掉
`;
